Design Snippets to Wow Your Website Visitors
Web trends seem to change overnight. Each year the newest looks make their way into the code of websites across the Internet causing designers to start thinking about how they can apply these styles to their portfolio.
Luckily Cascading Style Sheets (CSS) makes it easy to apply the look and experience of the latest design trends to a site in a matter of minutes when you use snippets.Some snippets were created to increase functionality and provide the user with a better experience, but the ones below deal strictly with the aesthetics of your website. Each one will help you stay current with the latest trends and wow your visitors.
Flat menu
Flat design is all the rage these days. With this snippet, you can build a flat navigation menu that uses icons, but when selected the name of the page appears to the right of the menu as well:
nav ul {
list-style: none; overflow: hidden; position: relative;
}
nav ul li {
}
float: left; margin: 0 20px 0 0;
nav ul li a {
display: block; width: 120px; height: 120px;
background-image:url(icons.png);background-repeat:no-repeat;
}
nav ul li:nth-child(1) a {
background-color: #5bb2fc;
background-position: 28px 28px;
}
nav ul li:nth-child(2) a {
background-color: #58ebd3;
background-position: 28px -96px;
}
nav ul li:nth-child(3) a {
background-color: #ffa659;
background-position: 28px -222px;
}
nav ul li:nth-child(4) a {
background-color: #ff7a85;
background-position: 28px -342px;
}
nav ul li a span {
font: 50px "Dosis", sans-serif;
text-transform: uppercase;
top: 29px;
position: absolute; left: 580px;
display: none;
}
nav ul li a:hover span {
}
nav ul li:nth-child(1) a span {
color: #5bb2fc;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
}
nav ul li:nth-child(4) a span {
color: #ff7a85;
}
display: block;
Cool looking social footer
Each icon should have div element that calls on the font icon that corresponds with the social service using this HTML:
<div class="footer">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>
And here is the css to make it look nice:
@import url('https://fonts.googleapis.com/css?family=Lato:300');
@import url('http://weloveiconfonts.com/api/?family=entypo');
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #ddd;
}
.content {
padding: 30px;
font: 300 40px Lato, sans-serif;
text-align: center;
color: #999;
background: #eee;
}
.footer {
padding: 20px 0;
text-align: center;
}
.social {
display: inline-block;
width: 70px;
height: 70px;
margin: 0 10px;
line-height: 70px;
font-family: Entypo;
font-size: 35px;
text-align: center;
color: #bbb;
border-radius: 50%;
background: #eee;
overflow: hidden;
transition: color .3s;
}
.social:hover {
color: #59d;
cursor: pointer;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px,
rgb(210, 210, 210) 2px 2px,
rgb(211, 211, 211) 3px 3px,
rgb(211, 211, 211) 4px 4px,
rgb(211, 211, 211) 5px 5px,
rgb(212, 212, 212) 6px 6px,
rgb(212, 212, 212) 7px 7px,
rgb(212, 212, 212) 8px 8px,
rgb(213, 213, 213) 9px 9px,
rgb(213, 213, 213) 10px 10px,
rgb(214, 214, 214) 11px 11px,
rgb(214, 214, 214) 12px 12px,
rgb(214, 214, 214) 13px 13px,
rgb(215, 215, 215) 14px 14px,
rgb(215, 215, 215) 15px 15px,
rgb(215, 215, 215) 16px 16px,
rgb(216, 216, 216) 17px 17px,
rgb(216, 216, 216) 18px 18px,
rgb(216, 216, 216) 19px 19px,
rgb(217, 217, 217) 20px 20px,
rgb(217, 217, 217) 21px 21px,
rgb(218, 218, 218) 22px 22px,
rgb(218, 218, 218) 23px 23px,
rgb(218, 218, 218) 24px 24px,
rgb(219, 219, 219) 25px 25px,
rgb(219, 219, 219) 26px 26px,
rgb(219, 219, 219) 27px 27px,
rgb(220, 220, 220) 28px 28px,
rgb(220, 220, 220) 29px 29px,
rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px,
rgb(227, 227, 227) 2px 2px,
rgb(227, 227, 227) 3px 3px,
rgb(228, 228, 228) 4px 4px,
rgb(229, 229, 229) 5px 5px,
rgb(229, 229, 229) 6px 6px,
rgb(230, 230, 230) 7px 7px,
rgb(230, 230, 230) 8px 8px,
rgb(231, 231, 231) 9px 9px,
rgb(232, 232, 232) 10px 10px,
rgb(232, 232, 232) 11px 11px,
rgb(233, 233, 233) 12px 12px,
rgb(233, 233, 233) 13px 13px,
rgb(234, 234, 234) 14px 14px,
rgb(235, 235, 235) 15px 15px,
rgb(235, 235, 235) 16px 16px,
rgb(236, 236, 236) 17px 17px,
rgb(236, 236, 236) 18px 18px,
rgb(237, 237, 237) 19px 19px,
rgb(238, 238, 238) 20px 20px;
}
If you would like to maintain the flat look, simply remove the shadows in the CSS.
Registration/login form
It's one thing to use the stale forms that come with so many web apps and another to give your users something that pops. Give this snippet a try for a cool looking form:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.about {
margin: 70px auto 40px;
padding: 8px;
width: 260px;
font: 10px/18px 'Lucida Grande', Arial, sans-serif;
color: #666;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
background: #eee;
background: rgba(250, 250, 250, 0.8);
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px
rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255,255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
}
.about a {
color: #333;
text-decoration: none;
border-radius: 2px;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
transition: background 0.1s;
}
.about a:hover {
text-decoration: none;
background: #fafafa;
background: rgba(255, 255, 255, 0.7);
}
.about-links {
height: 30px;
}
.about-links > a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}
.about-author {
margin-top: 5px;
}
.about-author > a {
padding: 1px 3px;
margin: 0 -1px;
}
/*
* Copyright (c) 2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
body {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
background: #596778;
}
.sign-up {
position: relative;
margin: 50px auto;
width: 280px;
padding: 33px 25px 29px;
background: white;
border-bottom: 1px solid #c4c4c4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.sign-up:before, .sign-up:after {
content: '';
position: absolute;
bottom: 1px;
left: 0;
right: 0;
height: 10px;
background: inherit;
border-bottom: 1px solid #d2d2d2;
border-radius: 4px;
}
.sign-up:after {
bottom: 3px;
border-color: #dcdcdc;
}
.sign-up-title {
margin: -25px -25px 25px;
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 300;
color: #aaa;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
background: #f7f7f7;
}
.sign-up-title:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: #c4e17f;
border-radius: 5px 5px 0 0;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%,
#669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%,
#669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%,
669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%,
#669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
input {
font-family: inherit;
color: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sign-up-input {
width: 100%;
height: 50px;
margin-bottom: 25px;
padding: 0 15px 2px;
font-size: 17px;
background: white;
border: 2px solid #ebebeb;
border-radius: 4px;
-webkit-box-shadow: inset 0 -2px #ebebeb;
box-shadow: inset 0 -2px #ebebeb;
}
.sign-up-input:focus {
border-color: #62c2e4;
outline: none;
-webkit-box-shadow: inset 0 -2px #62c2e4;
box-shadow: inset 0 -2px #62c2e4;
}
.lt-ie9 .sign-up-input {
line-height: 48px;
}
.sign-up-button {
position: relative;
vertical-align: top;
width: 100%;
height: 54px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgb(0, 0, 0, 0.25);
background: #f0776c;
border: 0;
border-bottom: 2px solid #d76b60;
border-radius: 5px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #d76b60;
box-shadow: inset 0 -2px #d76b60;
}
sign-up-button:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
:-moz-placeholder {
color: #ccc;
font-weight: 300;
}
::-moz-placeholder {
color: #ccc;
opacity: 1;
font-weight: 300;
}
::-webkit-input-placeholder {
color: #ccc;
font-weight: 300;
}
:-ms-input-placeholder {
color: #ccc;
font-weight: 300;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
Of course these snippets will likely stray from the colors and design that your sites use because they are for generic use. Simply change out the colors, the radius of the corners or anything else that needs an adjustment to make things look more like your own site.
Advanced designers; as well as those who are new to HTML and CSS can find these snippets to be a valuable addition to their toolbox. If you find that you need a bit of help to get things changed to look the way you want them to, take some time to review some of the CSS tutorials available from w3schools.com.
These books on CSS should also be handy:
About the author
Copyright © . All Rights Reserved